<template>
	<view>
		<view v-if="inPorcessOrderId != null" class="order-process" @click="toOrder">您有进行中的订单,点击查看</view>

		<map id="map" :longitude="location.longitude" :latitude="location.latitude" :style="contentStyle" scale="15"
			:enable-traffic="false" :show-location="true" :enable-poi="true" class="map">
			<cover-image class="location" src="../../static/workbench/location.png"
				@tap="toLocationHandle()"></cover-image>
		</map>
		<view class="panel">
			<view class="from" @tap="chooseLocationHandle('from')">
				<text>{{ from.address }}</text>
			</view>
			<view class="dashed-line"></view>
			<view class="to" @tap="chooseLocationHandle('to')">
				<text>{{ to.address }}</text>
			</view>
			<button class="btn" @tap="toCreateOrderHandle">呼叫代驾</button>
		</view>
	</view>
</template>

<script>
	import GtPush from '../../lib/gtpush-min.js'
	//地图点选插件
	const chooseLocation = requirePlugin('chooseLocation');
	let QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');
	let qqmapsdk;
//数据层是在onload生命周期之前 初始化的
	export default {
		data() {
			return {
				//开始位置
				from: {
					address: '请输入起点',
					longitude: 0,
					latitude: 0
				},
				//结束位置
				to: {
					address: '请输入终点',
					longitude: 0,
					latitude: 0
				},
				//当前位置经纬度
				location: {
					longitude: null,
					latitude: null,
				},
				// longitude: 104.06163,
				// latitude: 30.59415,
				//窗口样式
				contentStyle: '',
				windowHeight: 0,
				//地图对象
				map: null,
				//标记:开始位置点选或者结束位置点选
				chooseFromOrToflag: null,
				inPorcessOrderId: null,
				type:'',
			};
		},
		methods: {
			//当选择好了起点和终点 需要触发点击事件 跳转到
			toCreateOrderHandle(){
				uni.navigateTo({
					url:"/pages/create_order/create_order",
				})
			},
			//选择乘客的起始位置
			chooseLocationHandle(type) {
				let _this = this;
				//当触发点击事件的时候，将类型放在storage 因为在
				_this.type = type;
				const key = _this.Consts.QQMAP_KEY; //使用在腾讯位置服务申请的key
				const referer = 'sxbTaxi'; //调用插件的app的名称
				// const location = JSON.stringify({
				// 	longitude: _this.location.longitude,
				// 	latitude: _this.location.latitude,
				// });
				const category = '生活服务,娱乐休闲';
				wx.navigateTo({
					url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&category=${category}`
				});
			},
			//返回当前位置的方法 点击返回当前位置
			toLocationHandle(){
				let _this = this;
				_this.map.moveToLocation();
			},
			//加载
			getLocation() {
				let _this = this;
				uni.getLocation({
					type: 'wgs84',
					accuracy: 'best',
					success: function(res) {
						_this.location.longitude = res.longitude;
						_this.location.latitude = res.latitude;
					},
					fail: function(error) {
						uni.showToast({
							icon: "error",
							title: "定位失败"
						})
					}
				});
			},
			//腾讯地图，地址解析
			reverseGeocoder() {
				let _this = this;
				qqmapsdk.reverseGeocoder({
					//在reverseGeocoder回调函数中
					success: function(res) {
						console.log("腾讯地图将获取的自己的位置解析成地址", res);
						console.log("输出当前from中的地址 经纬度",_this.from);
						// == 比较值
						//=== 比较值也比较地址
						if(res.status===0){
							_this.from.address = res.result.formatted_addresses.standard_address;
							_this.from.longitude = res.result.location.lng;
							_this.from.latitude = res.result.location.lat;
							uni.setStorageSync("from",_this.from);
						}
					}
				});
			},
			//初始化窗口样式
			initStyle() {
				let _this = this;
				//处理窗口样式
				let windowHeight = uni.getSystemInfoSync().windowHeight;
				_this.windowHeight = windowHeight;
				_this.contentStyle = `height:${_this.windowHeight}px;`;
			},
		},
		//一个uniap页面先去加载onload 同步执行的
		onLoad: function() {
			let _this = this;
			_this.initStyle();
			_this.map = uni.createMapContext("map", this);
			qqmapsdk = new QQMapWX({
				key: _this.Consts.QQMAP_KEY, // 必填
			});
			//加载当前位置
			_this.getLocation();
			//解析经纬度为当前地址
			_this.reverseGeocoder();
		},
		//加载完onload 然后再去显示，当从其他页面返回到当前页面时，也会触发onshow 异步执行的
		onShow: function() {
			let _this = this;
			//这是在获取选点之后的位置
			let chooseLocation = requirePlugin('chooseLocation');
			console.log("测试chooseLocation",chooseLocation);
			let location = chooseLocation.getLocation();
			console.log("测试location",location);
			if(_this.type=="from"){
				_this.from = location;
				uni.setStorageSync("from",_this.from);
			}else if(_this.type=="to"){
				_this.to = location;
				uni.setStorageSync("to",_this.to);
			}
		
		},
		onHide: function() {
			let _this = this;
		},
		
		onUnload: function() {
			let _this = this;
		}
	};
</script>

<style lang="less">
	@import url('workbench.less');
</style>